<template>

    <el-form inline="true"> <!-- 使用 ElForm 组件，设置 inline 为 true，表示表单项排列为一行 -->
        <!-- 第一个表单项 -->
        <el-form-item>
            <!-- 自定义选择器组件，提供题目难度选择 -->
            <QuestionSelector 
                v-model="params.difficulty" 
                placeholder="请选择题目难度"
                style="width: 200px;">
            </QuestionSelector> 
        </el-form-item>

        <!-- 第二个表单项 -->
        <el-form-item>
            <el-input v-model="params.title" placeholder="请您输入要搜索的题目标题" /> <!-- 输入框，绑定 params.title，用于搜索题目标题 -->
        </el-form-item>

        <!-- 第三个表单项 -->
        <el-form-item>
            <el-button plain @click="onSearch">搜索</el-button> <!-- 搜索按钮，plain 表示按钮没有背景色 -->
            <el-button plain type="info" @click="onReset">重置</el-button> <!-- 重置按钮，plain 表示按钮没有背景色，type="info" 表示信息类型 -->
            <!-- 添加题目按钮，plain 表示按钮没有背景色，type="primary" 表示主要按钮，icon="Plus" 表示按钮上有图标 -->
            <el-button plain type="primary" :icon="Plus" @click="onAddQuestion">添加题目</el-button>
        </el-form-item>
    </el-form>

    <!-- 使用 el-table 组件，设置表格的高度为 526px，绑定 questionList 数据源 -->
    <el-table height="526px" :data="questionList"> 
        <!-- 题目ID列 -->
        <el-table-column prop="questionId" width="180px" label="题目id" /> <!-- 显示题目 ID，宽度为 180px -->

        <!-- 题目标题列 -->
        <el-table-column prop="title" label="题目标题" /> <!-- 显示题目标题 -->

        <!-- 题目难度列 -->
        <el-table-column prop="difficulty" label="题目难度" width="90px"> <!-- 显示题目难度，宽度为 90px -->
            <template #default="{ row }"> <!-- 使用插槽渲染每行的数据 -->
                <div v-if="row.difficulty === 1" style="color:#3EC8FF;">简单</div> <!-- 如果难度为 1，显示 "简单" 并设置颜色为蓝色 -->
                <div v-if="row.difficulty === 2" style="color:#FE7909;">中等</div> <!-- 如果难度为 2，显示 "中等" 并设置颜色为橙色 -->
                <div v-if="row.difficulty === 3" style="color:#FD4C40;">困难</div> <!-- 如果难度为 3，显示 "困难" 并设置颜色为红色 -->
            </template>
        </el-table-column>

        <!-- 创建人列 -->
        <el-table-column prop="createName" label="创建人" width="140px" /> <!-- 显示创建人，宽度为 140px -->

        <!-- 创建时间列 -->
        <el-table-column prop="createTime" label="创建时间" width="180px" /> <!-- 显示创建时间，宽度为 180px -->

        <!-- 操作列，固定在右侧 -->
        <el-table-column label="操作" width="100px" fixed="right"> <!-- 显示操作列，宽度为 100px，固定在右侧 -->
            <template #default="{ row }"> <!-- 使用默认插槽，传递当前行的数据 -->
                <el-button type="text" @click="onEdit(row.questionId)">编辑</el-button> <!-- 编辑按钮，使用文本类型的按钮 -->
                <el-button type="text" class="red" @click="onDelete(row.questionId)">删除</el-button> <!-- 删除按钮，使用文本类型的按钮，并添加了一个 red 类来控制样式（如字体颜色） -->
            </template> 
        </el-table-column>
    </el-table>


    <el-pagination
        size="small" 
        background 
        layout="total, sizes, prev, pager, next, jumper" 
        :total=_total 
        v-model:current-page="params.pageNum" 
        :page-sizes="[10,20,30,40,50]" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <QuestionDrawer 
        ref="questionDrawerRef"
        @success="onSuccess">
    </QuestionDrawer>
</template>

<script setup>
import questionService from "@/apis/question-service";
import QuestionSelector from "@/components/QuestionSelector.vue"
import QuestionDrawer from "@/components/QuestionDrawer.vue"
import { Plus } from "@element-plus/icons-vue"
import { reactive, ref } from "vue";


// 定义一个响应式对象 params，用于存储分页参数和搜索条件
const params = reactive({
    pageNum: 1,  // 当前页码
    pageSize: 10,  // 每页显示的条数
    title: "",  // 搜索的题目标题
    difficulty: ""  // 选择的题目难度
});

// 定义响应式引用变量，用于存储题目列表和总记录数
const questionList = ref([]);  // 存储题目列表
const _total = ref(0);  // 存储总记录数

// 定义异步函数 getQuestionList，用于根据 params 获取题目列表
async function getQuestionList() {
    const result = await questionService.getQuestionList(params);  // 调用服务获取数据
    questionList.value = result.rows;  // 更新题目列表
    _total.value = result.total;  // 更新总记录数
}
getQuestionList();  // 初始化获取题目列表

// 重新设置每页条数和页码为 1，刷新列表
function handleSizeChange(newPageSize) {
    params.pageSize = newPageSize;  // 更新每页显示的条数
    params.pageNum = 1;  // 将页码重置为 1
    getQuestionList();  // 获取新数据
}

// 重新获取当前页的数据
function handleCurrentChange() {
    getQuestionList();  // 获取当前页数据
}

// 用于处理搜索按钮点击事件
async function onSearch() {
    params.pageNum = 1;  // 将页码重置为 1
    getQuestionList();
}

function onReset () {  // 定义一个函数 onReset，用于重置表单和分页参数
    params.title = "";  // 清空搜索标题
    params.difficulty = "";  // 清空选择的难度
    params.pageNum = 1;  // 将页码重置为 1
    params.pageSize = 10;  // 每页显示的条数保持不变
    getQuestionList();  // 获取新数据
}

// 用来保存组件实例的引用，自动关联同名的 ref
const questionDrawerRef = ref()
function onAddQuestion() {
    questionDrawerRef.value.onOpen()  // 打开抽屉组件
}

// 子组件添加或修改成功后，通知父组件调用这个函数刷新列表
function onSuccess(service){
    if(service === 'add') {
        ElMessage.success('添加成功！');  // 显示成功消息
        params.pageNum = 1;  // 将页码重置为 1
    }
    getQuestionList();  // 获取新数据
}



function onEdit(questionId){
    questionDrawerRef.value.onOpen(questionId)  // 打开抽屉组件
}

async function onDelete(questionId){
    await questionService.deleteQuestion(questionId);
    getQuestionList();  // 获取新数据
}
</script>